<template>
  <div class="storage-spec">
    <a-card class="spec-content">
      <a-space>
        <label for="inputedSpec">规格名称:</label>
        <a-input v-model:value="inputedSpec" id="inputedSpec" placeholder="规格名称" />
        <a-button type="primary" @click="searchBtn">查询</a-button>
        <a-button @click="resetBtn">重置</a-button>
      </a-space>
      <ele-pro-table class="table" :row-key="id" :datasource="table" :columns="columns">
        <template #toolbar>
          <a-button type="primary" @click="createBtn">
            <template #icon>
              <PlusOutlined />
            </template>
            新建
          </a-button>
        </template>
        <template #type="{text}">
          {{ text ? '5层箱子' : '3层箱子' }}
        </template>
        <!-- 操作 -->
        <template #operation="{record}">
          <span><a style="color: #1890FF;" @click="editRow(record)">修改</a>&nbsp;</span>
          <span><a style="color: red" @click="delRow(record.id)">删除</a>&nbsp;</span>
        </template>
      </ele-pro-table>
    </a-card>
    <a-modal v-model:visible="model" :title="title" @ok="confirmBtn">
      <a-form :model="form">
        <a-form-item label="名称">
          <a-input v-model:value="form.title" />
        </a-form-item>
        <a-form-item label="类型">
          <a-select v-model:value="form.type" placeholder="请选择箱子类型">
            <a-select-option :value="0">三层箱子</a-select-option>
            <a-select-option :value="1">五层箱子</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="长">
          <a-input v-model:value.number="form.length" />
        </a-form-item>
        <a-form-item label="宽">
          <a-input v-model:value.number="form.width" />
        </a-form-item>
        <a-form-item label="高">
          <a-input v-model:value.number="form.height" />
        </a-form-item>
        <a-form-item label="体积">
          <a-input v-model:value.number="form.volume" />
        </a-form-item>
        <a-form-item label="排序">
          <a-input v-model:value.number="form.sort" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import { PlusOutlined } from '@ant-design/icons-vue'

export default {
  components: {
    PlusOutlined
  },
  data() {
    return {
      inputedSpec: null,
      table: [],
      columns: [
        {
          title: '编号',
          dataIndex: 'id'
        },
        {
          title: '箱子名称',
          dataIndex: 'title'
        },
        {
          title: '长/cm',
          dataIndex: 'length'
        },
        {
          title: '宽/cm',
          dataIndex: 'width'
        },
        {
          title: '高/cm',
          dataIndex: 'height'
        },
        {
          title: '类型',
          dataIndex: 'type',
          slots: { customRender: 'type' }
        },
        {
          title: '体积/立方米',
          dataIndex: 'volume'
        },
        {
          title: '排序',
          dataIndex: 'sort'
        },
        {
          title: '操作',
          slots: { customRender: 'operation' }
        }
      ],
      model: false,
      title: null,
      form: {
        title: null,
        type: null,
        length: null,
        width: null,
        height: null,
        volume: null,
        sort: null
      }
    }
  },
  methods: {
    searchBtn() {
      this.getTable()
    },
    resetBtn() {
      this.inputedSpec = null
      this.getTable()
    },
    getTable() {
      this.$http({
        url: '/depot/box_rule',
        method: 'get',
        params: {
          title: this.inputedSpec
        }
      })
        .then(result => {
          // console.log(result.data.data.list)
          this.table = result.data.data.list
        })
        .catch(error => {
          console.log(error)
        })
    },

    confirmBtn() {
      if (this.title === '新建') {
        this.$http({
          url: '/depot/box_rule',
          method: 'post',
          data: this.form
        })
          .then(() => {
            this.model = false
            this.getTable()
          })
          .catch(error => {
            console.log(error)
          })
      } else {
        this.$http({
          url: '/depot/box_rule/update',
          method: 'post',
          data: this.form
        })
          .then(() => {
            this.model = false
            this.getTable()
          })
          .catch(error => {
            console.log(error)
          })
      }
    },

    createBtn() {
      this.title = '新建'
      this.form = {
        title: null,
        type: null,
        length: null,
        width: null,
        height: null,
        volume: null,
        sort: null
      }
      this.model = true
    },
    editRow(record) {
      this.title = '修改'
      this.form = record
      this.model = true
    },
    delRow(id) {
      this.$http({
        url: `/depot/box_rule/${id}`,
        method: 'delete'
      })
        .then(() => {
          this.getTable()
        })
        .catch(error => {
          console.log(error)
        })
    }
  },
  created() {
    this.getTable()
  }
}
</script>

<style scoped>
.storage-spec {
  width: 100%;
  height: 100%;
}

.storage-spec .spec-content {
  width: 98%;
  margin: 1%;
}

.storage-spec .spec-content .table {
  margin-top: 2%;
}
</style>
